

import React, { useEffect, useRef } from 'react';
import { ProDescriptions, ProDescriptionsItemProps, ProDescriptionsActionType } from '@ant-design/pro-components';
import { Button } from 'antd';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Descriptions } from 'antd';
import { getGoods } from '../../api/Goods';
import { ArrowLeftOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom';

export default () => {
  const actionRef = useRef<ProDescriptionsActionType>();
useEffect(()=>{getGoods()
    
},[]
)
const navigate = useNavigate()
  return (
    <div
      style={{
        background: '#F5F7FA',
      }}
    >
         <Button icon={<ArrowLeftOutlined></ArrowLeftOutlined>} style={{ border: 2}} onClick={() => { navigate('/WorkSpace/AddGoods') }}></Button>
      <PageContainer
        ghost
        header={{
          title: '页面标题',
          breadcrumb: {},
        }}
        content={
          <ProDescriptions
            actionRef={actionRef}
            title="商品名称"
            request={async () => {
              return Promise.resolve({
                success: true,
                data: {
                  id: '这是一段文本',
                  date: '20200730',
                  money: '12121',
                },
              });
            }}
            extra={
              <>
                <Button type="link">编辑</Button>
                <Button type="link">发起审核</Button>
                <Button type="link">审核通过</Button>
                <Button type="link">审批驳回</Button>
                <Button type="link">上线</Button>
              </>
            }
          >
            <ProDescriptions.Item dataIndex="id" label="管理人" />
            <ProDescriptions.Item dataIndex="date" label="创建人" valueType="date" />
            <ProDescriptions.Item label="权益id" dataIndex="money" valueType="money" />
            <ProDescriptions.Item
              label="文急急急急急急急急急"
              valueType="option"
            >
              <Button
                type="primary"
                onClick={() => {
                  actionRef.current?.reload();
                }}
                key="reload"
              >
                刷新
              </Button>
              <Button key="rest">重置</Button>
            </ProDescriptions.Item>
          </ProDescriptions>
        }
      >
        <ProCard direction="column" ghost gutter={[0, 16]}>
            
        
          <ProCard style={{ height: 1 }
        
        } />
        </ProCard>
        <ProDescriptions
            title="基础信息"
            request={async () => {
                return Promise.resolve({
                    success: true,
                    data: {
                        date: '20200809',
                        money: '1212100',
                        money2: -12345.33,
                        state: 'all',
                        switch: true,
                        state2: 'open',
                        product_name: 1111,
                        description: "hhh",
                    },
                });
            }}
            emptyText={'空'}
            columns={[
                {
                    title: '商品名称',
                    key: 'product_name',
                    dataIndex: 'product_name',
                },
                {
                    title: '权益类型',
                    key: 'text',
                    dataIndex: 'rai_type',
                    valueType: 'integer',
                },
                {
                    title: '描述信息',
                    key: 'text',
                    dataIndex: 'description',
                },
                {
                    title: '富文本',
                    key: 'text',
                    dataIndex: 'rich_text',
                },
                {
                    title: '类目',
                    key: 'text',
                    dataIndex: 'category',
                },
                {
                    title: '服务保障',
                    key: 'text',
                    dataIndex: 'service_guarantee',
                },
                {
                    title: '兑换限制',
                    key: 'text',
                    dataIndex: 'exchange_restrictions',
                    valueType: 'integer',
                },
                {
                    title: '库存',
                    key: 'text',
                    dataIndex: 'stock',
                    valueType: 'integer',
                },
                {
                    title: '商品图片',
                    key: 'text',
                    dataIndex: 'product_picture',
                },
                {
                    title: '审核状态',
                    key: 'state',
                    dataIndex: 'state',
                    valueType: 'select',
                    valueEnum: {
                        all: { text: '审核通过', status: 'Default' },
                        open: {
                            text: '未解决',
                            status: 'Error',
                        },
                        closed: {
                            text: '已解决',
                            status: 'Success',
                        },
                    },
                },
                {
                    title: '权益类型',
                    key: 'state2',
                    dataIndex: 'state2',
                },
                {
                    title: '上线时间',
                    key: 'date',
                    dataIndex: 'time_on',
                    valueType: 'date',
                },

                {
                    title: '下线时间',
                    key: 'date',
                    dataIndex: 'time_off',
                    valueType: 'date',
                },

                {
                    title: '城市白名单',
                    key: 'text',
                    dataIndex: 'city_whitelist',
                },
                {
                    title: '供应商',
                    key: 'text',
                    dataIndex: 'supplier',
                },
                {
                    title: '创建时间',
                    key: 'date',
                    dataIndex: 'create_time',
                    valueType: 'date',
                },
                {
                    title: '操作人',
                    key: 'text',
                    dataIndex: 'operator',
                    valueType: 'integer',
                },
                {
                    title: '备注',
                    key: 'text',
                    dataIndex: 'remark',
                    // valueType: 'integer',
                },
                {
                    title: '操作',
                    valueType: 'option',
                    render: () => [
                        <a target="_blank" rel="noopener noreferrer" key="link">
                            链路
                        </a>,
                        <a target="_blank" rel="noopener noreferrer" key="warning">
                            报警
                        </a>,
                        <a target="_blank" rel="noopener noreferrer" key="view">
                            查看
                        </a>,
                    ],
                },
            ]}
        >
        </ProDescriptions>
        
      </PageContainer>
    </div>
  );
};
































































































































// import { EllipsisOutlined } from '@ant-design/icons';
// import { PageContainer, ProCard } from '@ant-design/pro-components';
// import { Button, Dropdown } from 'antd';
// import { Descriptions } from 'antd';
// // import { ProDescriptions } from '@ant-design/pro-components';

// export default () => (
//   <div
//     style={{
//       background: '#F5F7FA',
//     }}
//   >
//     <PageContainer
//       header={{
//         title: '页面标题',
//         ghost: true,
//         breadcrumb: {
//           items: [
//             {
//               path: '',
//               title: '一级页面',
//             },
//             {
//               path: '',
//               title: '二级页面',
//             },
//             {
//               path: '',
//               title: '当前页面',
//             },
//           ],
//         },
//         content={
//             <Descriptions column={2} style={{ marginBlockEnd: -16 }}>
//               <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
//               <Descriptions.Item label="关联表单">
//                 <a>421421</a>
//               </Descriptions.Item>
//               <Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
//               <Descriptions.Item label="单据备注">
//                 浙江省杭州市西湖区工专路
//               </Descriptions.Item>
//             </Descriptions>
//           }
//           <ProCard direction="column" ghost gutter={[0, 16]}>
//         <ProCard style={{ height: 200 }} />
//         <ProCard gutter={16} ghost style={{ height: 200 }}>
//           <ProCard colSpan={16} />
//           <ProCard colSpan={8} />
//         </ProCard>
//       </ProCard>
//     const content = {
//         column: 2,
//         style: { marginBlockEnd: -16 },
//         children: [
//           <Descriptions.Item key="creator" label="创建人">曲丽丽</Descriptions.Item>,
//           <Descriptions.Item key="relatedForm" label="关联表单">
//             <a>421421</a>
//           </Descriptions.Item>,
//           <Descriptions.Item key="createTime" label="创建时间">2017-01-10</Descriptions.Item>,
//           <Descriptions.Item key="note" label="单据备注">浙江省杭州市西湖区工专路</Descriptions.Item>
//         ]
//       };
//         //   <ProDescriptions.Item dataIndex="id" label="管理人"/>
//         //   <ProDescriptions.Item dataIndex="date" label="创建人" valueType="date" />
//         //   <ProDescriptions.Item label="权益id" dataIndex="money" valueType="money" />
      









//         extra: [
//           <Button key="1">次要按钮</Button>,
//           <Button key="2">次要按钮</Button>,
//           <Button key="3" type="primary">
//             主要按钮
//           </Button>,
//           <Dropdown
//             key="dropdown"
//             trigger={['click']}
//             menu={{
//               items: [
//                 {
//                   label: '下拉菜单',
//                   key: '1',
//                 },
//                 {
//                   label: '下拉菜单2',
//                   key: '2',
//                 },
//                 {
//                   label: '下拉菜单3',
//                   key: '3',
//                 },
//               ],
//             }}
//           >
//             <Button key="4" style={{ padding: '0 8px' }}>
//               <EllipsisOutlined />
//             </Button>
//           </Dropdown>,
//         ],
//       }}
//       tabBarExtraContent="测试tabBarExtraContent"
//       tabList={[
//         {
//           tab: '基本信息',
//           key: 'base',
//           closable: false,
//         },
//         {
//           tab: '详细信息',
//           key: 'info',
//         },
//       ]}
//       tabProps={{
//         type: 'editable-card',
//         hideAdd: true,
//         onEdit: (e, action) => console.log(e, action),
//       }}
//       footer={[
//         <Button key="3">重置</Button>,
//         <Button key="2" type="primary">
//           提交
//         </Button>,
//       ]}
//     >
//       <ProCard direction="column" ghost gutter={[0, 16]}>
//         <ProCard style={{ height: 200 }} />
//         <ProCard gutter={16} ghost style={{ height: 200 }}>
//           <ProCard colSpan={16} />
//           <ProCard colSpan={8} />
//         </ProCard>
//       </ProCard>
//     </PageContainer>
//   </div>
// );